'use client';

import { Button, Text } from '@lobehub/ui';
import { Card, Divider } from 'antd';
import { createStyles } from 'antd-style';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Center, Flexbox } from 'react-layout-kit';

import OAuthApplicationLogo from './components/OAuthApplicationLogo';

interface ClientProps {
  clientId: string;
  clientMetadata: {
    clientName?: string;
    isFirstParty?: boolean;
    logo?: string;
  };

  redirectUri?: string;
  scopes: string[];
  uid: string;
}

const useStyles = createStyles(({ css, token }) => ({
  authButton: css`
    width: 100%;
    height: 40px;
    border-radius: ${token.borderRadius}px;
    font-weight: 500;
  `,
  cancelButton: css`
    width: 100%;
    height: 40px;
    border-color: ${token.colorBorderSecondary};
    border-radius: ${token.borderRadius}px;

    font-weight: 500;
    color: ${token.colorTextBase};

    background-color: transparent;
  `,
  card: css`
    width: 100%;
    max-width: 500px;
    border-color: ${token.colorBorderSecondary};
    border-radius: 12px;

    background-color: ${token.colorBgContainer};
  `,
  connector: css`
    width: 40px;
    height: 40px;
  `,
  connectorLine: css`
    width: 32px;
    height: 1px;
    background-color: ${token.colorBorderSecondary};
  `,
  container: css`
    width: 100%;
    min-height: 100vh;
    color: ${token.colorTextBase};
    background-color: ${token.colorBgLayout};
  `,
  icon: css`
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    border: 1px solid ${token.colorBorderSecondary};
    border-radius: 16px;

    background-color: ${token.colorBgElevated};
  `,
  iconContainer: css`
    display: flex;
    align-items: center;
    justify-content: center;
  `,
  lobeIcon: css`
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    border-radius: 50%;

    background-color: ${token.colorBgElevated};
  `,
  scope: css`
    margin-block: 8px;
    padding: 12px;
    border-radius: 6px;
    background: ${token.colorFillQuaternary};
  `,
  scopes: css`
    width: 100%;
  `,
  title: css`
    margin-block-end: ${token.marginLG}px;
    font-size: 24px;
    color: ${token.colorTextBase};
    text-align: center;
  `,
}));

/**
 * 获取 Scope 的描述
 */
function getScopeDescription(scope: string, t: any): string {
  return t(`consent.scope.${scope.replace(':', '-')}`, scope);
}

const ConsentClient = memo<ClientProps>(({ uid, clientId, scopes, clientMetadata }) => {
  const { styles } = useStyles();
  const { t } = useTranslation('oauth');

  const [isLoading, setIsLoading] = useState(false);

  const clientDisplayName = clientMetadata?.clientName || clientId;
  return (
    <Center className={styles.container} gap={16}>
      <Flexbox gap={40}>
        <OAuthApplicationLogo
          clientDisplayName={clientDisplayName}
          isFirstParty={clientMetadata.isFirstParty}
          logoUrl={clientMetadata.logo}
        />
        <Text as={'h3'} className={styles.title}>
          {t('consent.title', { clientName: clientDisplayName })}
        </Text>
      </Flexbox>
      <Card className={styles.card}>
        <Flexbox gap={8}>
          <Flexbox gap={12}>
            <Text>{t('consent.description', { clientName: clientDisplayName })}</Text>

            <div className={styles.scopes}>
              <Text type={'secondary'}>{t('consent.permissionsTitle')}</Text>
              {scopes.map((scope) => (
                <div className={styles.scope} key={scope}>
                  <Text>{getScopeDescription(scope, t)}</Text>
                </div>
              ))}
            </div>

            <Divider dashed />
            <form action="/oidc/consent" method="post" style={{ width: '100%' }}>
              <input name="uid" type="hidden" value={uid} />
              <Flexbox gap={12} horizontal>
                <Button
                  className={styles.cancelButton}
                  htmlType="submit"
                  name="consent"
                  value="deny"
                >
                  {t('consent.buttons.deny')}
                </Button>
                <Button
                  className={styles.authButton}
                  htmlType="submit"
                  loading={isLoading}
                  name="consent"
                  onClick={() => {
                    setIsLoading(true);
                  }}
                  type="primary"
                  value="accept"
                >
                  {t('consent.buttons.accept')}
                </Button>
              </Flexbox>
            </form>
          </Flexbox>
        </Flexbox>
      </Card>
    </Center>
  );
});

ConsentClient.displayName = 'ConsentClient';

export default ConsentClient;